* {
  list-style: none;
}
.container {
  ul {
    display: flex;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    li {
      margin: 0 25px;
      &:hover div {
        background: #dd4b39;
        box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
        transform: rotate(-30deg) skew(25deg) translate(20px -15px);
        &::before {
          background: #b33a2b;
        }
        &::after {
          background: #e66a5a;
        }
      }
      &:hover i,
      &:hover span {
        color: #fff;
      }
      div {
        display: block;
        width: 100px;
        height: 40px;
        background: #fff;
        text-align: left;
        box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
        padding-left: 20px;
        transform: rotate(-30deg) skewX(25deg);
        transition: 0.5s;
        cursor: pointer;
        &::before {
          position: absolute;
          top: 10px;
          left: -20px;
          content: "";
          height: 100%;
          width: 20px;
          background: #b1b1b1;
          transform: rotate(0deg) skewY(-45deg);
          transition: 0.5s;
        }
        &::after {
          position: absolute;
          bottom: -20px;
          left: -10px;
          content: "";
          height: 20px;
          width: 100%;
          background: #b1b1b1;
          transform: rotate(0deg) skewX(-45deg);
          transition: 0.5s;
        }

        i {
          font-size: 14px;
          color: #333;
          line-height: 30px;
          padding-right: 10px;
          transition: 0.5s;
        }
        span {
          position: absolute;
          top: 5px;
          color: #333;
          font-size: 12px;
          letter-spacing: 2px;
          transition: 0.5s;
        }
      }
    }
  }
}
